<template>
	<p>array size: {{ tableDataSize }}</p>
	<p>store itemsCount: {{ itemsCount }}</p>
	<p v-for="tableItem in tableData" :key="tableItem.id">
		{{ tableItem }}
	</p>

	<button @click="buttonClick">emit</button>
	<button @click="addList">addList</button>
	<button @click="delLast">delLast</button>
	<button @click="testEventBus">testEventBus</button>
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
import { mapGetters, mapState, useStore } from "vuex";
import { fetchList } from "@/apis/test/test";
export default defineComponent({
	name: "Comp",
	emits: ["myclick"],
	computed: {
		...mapGetters("testModule", {
			itemsCount: "itemsCount",
		}),
	},
	setup: (props, { emit, attrs, slots, expose }) => {
		const store = useStore();
		const state = reactive({
			tableData: [{}],
		});

		let test: Array<any> = inject("test", []);

		const buttonClick = (): void => {
			emit("myclick", {
				...toRefs(state),
			});
		};
		let count = ref(2);
		const getList = async () => {
			fetchList({}).then(async (res) => {
				if (res?.code === 200) {
					let data = res?.data || [];
					state.tableData = [];
					data.forEach((item) => {
						state.tableData.push(item);
						store.dispatch("testModule/ADD_ITEM", item);
					});
					count.value = state.tableData.length;
				}
			});
		};
		const addList = (): void => {
			count.value++;
			let item = {
				id: count.value,
				name: "test" + count.value,
				age: count.value,
			};
			state.tableData.push(item);
			store.dispatch("testModule/ADD_ITEM", item);
		};
		const delLast = (): void => {
			count.value++;
			let item = state.tableData.pop();
			store.dispatch("testModule/POP_ITEM", item);
		};

		const tableDataSize = computed(() => state.tableData.length);
    
		onMounted(() => {
			getList();
		});
		return {
			...toRefs(state),
			addList,
			delLast,
			buttonClick,
			tableDataSize,
		};
	},
	methods: {
		testEventBus() {
			(this as any).$bus.emit("testEventBus", {name:"参数1"});
		},
	},
});
</script>

<style>
</style>